<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    *{
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    .divjq{
      border:solid 3px #f3f3f3;
      
      margin:20px 10px;
      padding:10px 10px;
      border-radius: 10px;
      box-shadow: 3px 4px 10px #858080;
      background-color: rgb(209, 227, 243);

    }
    .name{
/* background-color: aqua; */
    }
    .text{
/* background-color: blanchedalmond; */
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: cornflowerblue;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <div class="box1"></div>
  <script>
    // var p=document.createElement("p");
    // p.innerHTML="追加元素"
    // var box = document.getElementById("box");
    // box.appendChild(p);

    // $("#box").css('background','red')
    
    // $("#box").append(
    //   `<ul>
    //     <li>a</li>
    //     <li>b</li>
    //     <li>c</li>
    //   </ul>  `
    // )
    var arr=[
      {
        nickname:'小',
        text:'xiao'
      },
      {
        nickname:'中',
        text:'zhong'
      },
      {
        nickname:'大',
        text:'da'
      }
    ]
    console.log(arr);

    var box=$("#box");

    for(var i=0;i<arr.length;i++){
      console.log(arr[i].text)
      // box.append('<p>'+arr[i].text+'</p>')
      // box.append('<p>'+arr[i].nickname+'</p')
      box.append(`
      <div class="divjq">
      <p class="name">${arr[i].nickname}</p>
      <p class="text">${arr[i].text}</p>
      </div>
      `)
    }
  </script>
</body>
</html>